<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <title>上传-测试</title>
    <meta name="keywords" content="" />
    <meta name="Description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1.0, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no" />
    <script src="/scripts/jquery.js" type="text/javascript"></script>
    <link href="/styles/base.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .container { width: 100%; min-width: 0; margin-left: 0px; margin-right: 0px; padding-left: 0px; /* grid-space to left */ padding-right: 0px; /* grid-space to right: (grid-space-left - column-space) e.g. 20px-10px=10px */ }
        .container:after { content: ""; display: table; clear: both; }
        [class*='col-'] { float: left; margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px; padding-left: 0px; padding-right: 0px; /* column-space */ padding-bottom: 0px; }
        .col-1-1 { width: 100%; }
        .offset-1-1 { margin-left: 100%; }
        
        .col-1-2 { width: 50%; }
        .offset-1-2 { margin-left: 50%; }
        .col-2-2 { width: 100%; }
        .offset-2-2 { margin-left: 100%; }
        
        .col-1-3 { width: 33.33333333%; }
        .offset-1-3 { margin-left: 33.33333333%; }
        .col-2-3 { width: 66.66666667%; }
        .offset-2-3 { margin-left: 66.66666667%; }
        .col-3-3 { width: 100%; }
        .offset-3-3 { margin-left: 100%; }
        
        .col-1-4 { width: 25%; }
        .offset-1-4 { margin-left: 25%; }
        .col-2-4 { width: 50%; }
        .offset-2-4 { margin-left: 50%; }
        .col-3-4 { width: 75%; }
        .offset-3-4 { margin-left: 75%; }
        .col-4-4 { width: 100%; }
        .offset-4-4 { margin-left: 100%; }
        
        .col-1-5 { width: 20%; }
        .offset-1-5 { margin-left: 20%; }
        .col-2-5 { width: 40%; }
        .offset-2-5 { margin-left: 40%; }
        .col-3-5 { width: 60%; }
        .offset-3-5 { margin-left: 60%; }
        .col-4-5 { width: 80%; }
        .offset-4-5 { margin-left: 80%; }
        .col-5-5 { width: 100%; }
        .offset-5-5 { margin-left: 100%; }
        
        .col-1-6 { width: 16.66666667%; }
        .offset-1-6 { margin-left: 16.66666667%; }
        .col-2-6 { width: 33.33333333%; }
        .offset-2-6 { margin-left: 33.33333333%; }
        .col-3-6 { width: 50%; }
        .offset-3-6 { margin-left: 50%; }
        .col-4-6 { width: 66.66666667%; }
        .offset-4-6 { margin-left: 66.66666667%; }
        .col-5-6 { width: 83.33333333%; }
        .offset-5-6 { margin-left: 83.33333333%; }
        .col-6-6 { width: 100%; }
        .offset-6-6 { margin-left: 100%; }
        
        .col-1-12 { width: 8.33333333%; }
        .offset-1-12 { margin-left: 8.33333333%; }
        .col-2-12 { width: 16.66666667%; }
        .offset-2-12 { margin-left: 16.66666667%; }
        .col-3-12 { width: 25%; }
        .offset-3-12 { margin-left: 25%; }
        .col-4-12 { width: 33.33333333%; }
        .offset-4-12 { margin-left: 33.33333333%; }
        .col-5-12 { width: 41.66666667%; }
        .offset-5-12 { margin-left: 41.66666667%; }
        .col-6-12 { width: 50%; }
        .offset-6-12 { margin-left: 50%; }
        .col-7-12 { width: 58.33333333%; }
        .offset-7-12 { margin-left: 58.33333333%; }
        .col-8-12 { width: 66.66666667%; }
        .offset-8-12 { margin-left: 66.66666667%; }
        .col-9-12 { width: 75%; }
        .offset-9-12 { margin-left: 75%; }
        .col-10-12 { width: 83.33333333%; }
        .offset-10-12 { margin-left: 83.33333333%; }
        .col-11-12 { width: 91.66666667%; }
        .offset-11-12 { margin-left: 91.66666667%; }
        .col-12-12 { width: 100%; }
        .offset-12-12 { margin-left: 100%; }

        
        .create-form { padding: 0; margin: 0; }
        .create-form .create-form-items { border-bottom: 1px solid #d9d9d9; }
        .create-form .create-form-items li.li-tit { padding-top: 5px; padding-bottom: 5px; padding-left: 3%; border-bottom: 1px solid #d9d9d9; font-size: 0.9em; color: #666; background: #f5f5f5; }
        .create-form .create-form-items li { padding-top: 10px; padding-bottom: 10px; padding-left: 3%; position: relative; }
        .create-form .create-form-items li input { border-width: 0; font-size: 1.0em; color: #666; width: 100%; text-overflow: ellipsis; }
        .create-form .create-form-items li .tit { position: absolute; color: #444; font-size: 1.0em; }
        .create-form .create-form-items li .input-t { padding-left: 80px; text-align: right; }
        .create-form .create-form-items li .input-s { background: url(/images/public_arrow_right.png) no-repeat 99% center; background-size: auto 15px; padding-right: 5%; }
        .create-form .create-form-items li .input-pr { padding-right: 5%; }
        .create-form .create-form-items li select { padding-left: 80px; outline: medium none; appearance: none; -moz-appearance: none; -webkit-appearance: none; background: #fff url(/images/public_arrow_bottom.png) no-repeat 99% center; width: 100%; border-width: 0; font-size: 1.0em; color: #666; text-align: right; }
        .create-form .create-form-items li .radio-items { font-size: 1.0em; color: #666; width: 100%; }
        .create-form .create-form-items li .radio-items .radio-item { display: inline-block; width: 100px; }
        .create-form .create-form-items li .bor { border: 1px solid #d9d9d9; }
        .create-form .create-form-items li.create-form-subitems { padding-top: 0px; padding-bottom: 0px; padding-left: 3%; }
        .create-form .create-form-items li.create-form-subitems .create-form-subitem { border-bottom: 1px solid #dbdbdb; padding: 10px 0px; margin: 0; overflow: hidden; }
        .create-form .create-form-items li.create-form-subitems .create-form-subitem:last-child { border-width: 0; }
        .create-form .create-form-sub { padding: 20px 3%; width: 100%; }
        .create-form .create-form-sub .btn { background: #00acee none repeat; border-radius: 4px; color: #fff; display: block; border-style: none; border-width: 0; font-size: 1.1em; height: 50px; line-height: 50px; width: 100%; text-align: center; }
        .create-form .create-form-items.icarwarp { background: #eaf9ff; }
        .create-form .create-form-items.icarwarp .icarwarp-t { background: url(/images/big_upkeep_top_img.png) repeat-x; border-bottom: 0px solid #d9d9d9; }
        /*上传样式 多图*/
        .upload-multiple-box { position: relative; vertical-align: middle; zoom: 1; }
        .upload-multiple-box a.add { background: #fff none repeat scroll 0 0; border: 1px dashed #3177bc; border-radius: 3px; color: #3177bc; display: block; font-family: simsun; font-size: 50px; font-weight: 400; height: 66px; line-height: 66px; margin: 0 auto; overflow: hidden; position: relative; text-align: center; width: 88px; }
        .upload-multiple-box a.add input { font-size: 50px; left: 0; opacity: 0; position: absolute; top: 0px; cursor:pointer; }
        /*图片相册样式*/
        .Album-list { margin: 0; padding: 0px 0 10px 0; }
        .Album-list .Album-item { text-align: center; position: relative; padding-top: 10px; }
        .Album-list .Album-item .img-box { cursor: pointer; margin: 0 auto; width: 90px; height: 68px; }
        .Album-list .Album-item .img-box img { width: 100%; height: 100%; }
        .Album-list .Album-item .delete { left: 50%; margin-left: 30px; position: absolute; top: 1px; z-index: 10; display: inline-block; height: 18px; width: 18px; line-height: 18px; color: #fff; background-color: #e70000; border-radius: 100%; }
    </style>
</head>
<body>
    <div class="create-form">
        <ul class="container create-form-items">
            <li class="col-1-1 li-tit">上传照片（请确保照片清晰可辨） </li>
            <li class="col-1-1 create-form-subitems">
                <div class="container Album-list" id="AlbumList">
                    <div class="Album-item upload-album upload-multiple-box  col-1-3">
                        <a class="add" href="javascript:;">+
                            <input id="addImgBtn" type="file" accept="image/jpeg,image/png,image/gif,image/bmp"
                                multiple="multiple" name="carImgInput">
                        </a>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</body>
<script src="scripts/h5UploadImage.js" type="text/javascript"></script>
</html>
